import Template from './Template';
import { IAlertOptions, DEFAULT_VALUES, UI_COLOR_TYPES } from './typings';
import $ from 'jquery';

class Alert extends Template {
  private _duration: number;
  private _headerTitle: string;
  private _alertText: string;
  private _oAlert: JQuery<HTMLElement>;
  private _oXIcon: JQuery<HTMLElement>;
  private _oInner: JQuery<HTMLElement>;
  private _oHeaderTitle: JQuery<HTMLElement>;
  private _oAlertText: JQuery<HTMLElement>;

  constructor(options: IAlertOptions) {
    super();

    const _options: IAlertOptions = Alert._mergeOptions(options);
    /**
     console.log(_options);
     * {duration: 300, headerTitle: '这是我的第一个Alert', alertText: '这是我的第一个Alert这是我的第一个Alert这是我的第一个Alert'}
     */

    this._duration = options.duration;
    this._headerTitle = options.headerTitle;
    this._alertText = options.alertText;

    this._render();
    this._bindEvent();
  }

  //公用 静态方法
  /**
   * 创建实例对象的方法 同时也是类静态方法
   * @param options 用户填写的配置项
   * @returns 实例化对象
   */
  public static create(options: IAlertOptions) {
    return new Alert(options);
  }

  //自身 静态方法
  private static _mergeOptions(options: IAlertOptions) {
    const _defaultOptions: IAlertOptions = {
      duration: DEFAULT_VALUES.DURATION as number,
      headerTitle: DEFAULT_VALUES.HEADER_TITLE as string,
      alertText: DEFAULT_VALUES.ALERT_TEXT as string
    };

    if (!options) {
      return _defaultOptions;
    }

    //合并
    return Object.assign(_defaultOptions, options);
  }

  //公用 实例方法
  public show(type?: string, options?: IAlertOptions) {
    if (options) {
      const { headerTitle, alertText, duration } = options;
      this._duration = duration || this._duration;

      //更改标题为用户配置的标题
      headerTitle && this._oHeaderTitle.html(headerTitle);

      //更改内容为用户配置的内容
      alertText && this._oAlertText.html(alertText);
    }

    //初始化_type = primary;
    let _type: UI_COLOR_TYPES = UI_COLOR_TYPES.PRIMARY;

    if (type) {
      for (let k in UI_COLOR_TYPES) {
        //证明用户有传type
        if (UI_COLOR_TYPES[k] === type) {
          //将用户传的type缓存
          _type = type as UI_COLOR_TYPES;
        }
      }
    }

    //给节点新增类
    this._oAlert.addClass(_type);

    //渐入动画显示
    this._oAlert.fadeIn(this._duration);
  }

  public hide() {
    //渐出动画隐藏
    this._oAlert.fadeOut(this._duration);
  }

  //自身
  private _render() {
    //调用父类的实例方法
    //并将返回的节点插入到页面body
    document.body.appendChild(
      this.alertView({
        headerTitle: this._headerTitle,
        alertText: this._alertText
      })
    );

    //获取节点
    //找到 <div class="alert hide"> </div>
    this._oAlert = $('.alert');
    this._oXIcon = $('.icon');
    this._oInner = $('.inner');
    this._oHeaderTitle = this._oAlert.find('header h1');
    this._oAlertText = this._oAlert.find('.alert-wrap p');
  }

  private _bindEvent() {
    //点击右上角X关闭
    this._oXIcon.on('click', this.hide.bind(this));
    //点击模态框其余位置关闭
    this._oAlert.on('click', this.hide.bind(this));
    //阻止冒泡 防止点击模态框区域时也被冒泡触发 关闭
    this._oInner.on('click', (e) => e.stopPropagation());
  }
}

export default Alert;
